<main id="main-content">
<% title @user.name %>

<%= content_for :page_meta do %>
  <%= render "users/meta" %>
  <% if @user.score.negative? || @user.spam_or_suspended? %>
    <meta name="robots" content="noindex">
    <meta name="robots" content="nofollow">
  <% end %>
<% end %>

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @user_json_ld.to_json.html_safe %>
  </script>
<% end %>

<% cache "user-profile-header-area-#{@user.id}-#{@user.profile.cache_key_with_version}-#{@user.cache_key_with_version}-#{user_signed_in?}-#{@user.badge_achievements_count}", expires_in: 10.days do %>
  <style>
    :root {
      --profile-brand-color: <%= Color::CompareHex.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
    }
  </style>
  <div class="brand-bg">
    <div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9">
      <header class="profile-header crayons-card mt-2">
        <div class="relative profile-header__top">
          <span class="crayons-avatar crayons-avatar--3xl">
            <img src="<%= @user.profile_image_url_for(length: 320) %>" width="128" height="128" alt="<%= @user.name %> profile picture" class="crayons-avatar__image">
          </span>

          <div class="profile-header__actions">
            <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button follow-user" data-info='<%= DataInfo.to_json(object: @user) %>'><%= t("views.users.follow") %></button>
            <div class="profile-dropdown ml-2 s:relative hide-if-belongs-to-current-user-<%= @user.id %>" data-username="<%= @user.username %>">
              <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
                <%= crayons_icon_tag("overflow-horizontal", class: "dropdown-icon", title: t("views.users.dropdown")) %>
              </button>

              <div id="user-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1">
                <% if user_signed_in? %>
                  <a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block"><%= t("views.users.block", user: @user.username) %></a>
                  <a
                    href="javascript:void(0);"
                    id="user-profile-dropdownmenu-flag-button"
                    data-profile-user-id="<%= @user.id %>"
                    data-profile-user-name="@<%= @user.username %>"
                    data-is-user-flagged="<%= @is_user_flagged %>"
                    class="border-none crayons-link crayons-link--block">
                    <%= t("views.users.#{@flag_status ? 'unflag' : 'flag'}", user: @user.username) %>
                  </a>
                  <a
                    href="javascript:void(0);"
                    id="user-profile-dropdownmenu-spam-button"
                    data-profile-user-id="<%= @user.id %>"
                    data-profile-user-name="@<%= @user.username %>"
                    data-is-user-spam="<%= @user.spam? %>"
                    class="border-none crayons-link crayons-link--block">
                    <%= t("views.users.#{@user.spam? ? 'unspam' : 'spam'}", user: @user.username) %>
                  </a>
                <% end %>
                <span class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= user_url(@user) %>"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="profile-header__details" data-url="<%= user_path(@user, format: "json") %>">
          <div class="items-center js-username-container mb-2">
            <h1 class="crayons-title lh-tight">
              <%= @user.name %>
              <span class="ml-2"><%= subscription_icon(@user) %></span>
              <% if @user.spam? %>
                &nbsp;<span class="c-indicator c-indicator--danger">Spam</span>
              <% end %>
            </h1>
          </div>

          <p class="fs-base profile-header__bio m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= @user.tag_line.presence || [t("views.users.empty")].sample %></p>

          <div class="profile-header__meta">
            <% if @user.profile.location.present? %>
              <span class="profile-header__meta__item">
                <%= crayons_icon_tag(:location, class: "mr-2 shrink-0", title: t("views.users.location_icon")) %>
                <span>
                  <%= @user.profile.location %>
                </span>
              </span>
            <% end %>

            <span class="profile-header__meta__item">
              <%= crayons_icon_tag(:cake, class: "mr-2 shrink-0", title: t("views.users.joined.icon")) %>
              <span>
                <%= t("views.users.joined.text_html", date: local_date(@user.created_at)) %>
              </span>
            </span>

            <% if @user.setting.display_email_on_profile %>
              <a href="mailto:<%= @user.email %>" class="profile-header__meta__item">
                <%= crayons_icon_tag(:email, class: "mr-2 shrink-0", title: t("views.users.email_icon")) %>
                <span>
                  <%= @user.email %>
                </span>
              </a>
            <% end %>

            <% if @user&.profile&.website_url.present? %>
              <a href="<%= @user&.profile&.website_url %>" target="_blank" rel="noopener me <%= "ugc" unless @user.trusted? %>" class="profile-header__meta__item">
                <%= crayons_icon_tag("external-link", class: "mr-2 shrink-0", title: t("views.users.website")) %>
                <span>
                  <%= @user&.profile&.website_url %>
                </span>
              </a>
            <% end %>

            <% social_authentication_links_for(@user).each do |provider_name, url| %>
              <a href="<%= url %>" target="_blank" rel="noopener me" class="profile-header__meta__item p-1">
                <%= crayons_icon_tag(provider_name, class: "shrink-0", title: t("views.users.social", service: provider_name)) %>
              </a>
            <% end %>
          </div>
        </div>

        <%= render "users/metadata" %>

        <% if @user.badge_achievements_count >= 7 %>
          <%= render partial: "users/badges_area", locals: {
                grouped_badges: @grouped_badges,
                count: @user.badge_achievements_count,
                limit: 12,
                show_heading: false,
                grid_class: "grid-cols-#{[@user.badge_achievements_count, 6].min} s:grid-cols-#{[@user.badge_achievements_count, 8].min} m:grid-cols-#{[@user.badge_achievements_count, 12].min}"
              } %>
        <% end %>

        <div class="p-3 block m:hidden js-user-info-trigger-wrapper">
          <button type="button" class="my-3 crayons-btn crayons-btn--outlined w-100 js-user-info-trigger"><%= t("views.users.more", user: @user.username) %></button>
        </div>

      </header>
    </div>
  </div>
<% end %>

<div
  class="crayons-layout crayons-layout--limited-l crayons-layout--2-cols crayons-layout--2-cols--1-2 pt-4 m:pt-0"
  id="index-container"
  data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
  data-tag=""
  data-feed="<%= params[:timeframe] || "base-feed" %>"
  data-articles-since="0">

  <div class="crayons-layout__sidebar-left crayons-layout__content">
    <%= render partial: "users/sidebar", locals: { repositories: @github_repositories } %>
  </div>

  <main class="crayons-layout__content articles-list" id="articles-list">
    <div class="substories" id="substories">
      <% if params[:view] == "comments" %>
        <% if user_signed_in? %>
          <%= render "users/comments_section" %>
        <% else %>
          <%= render "users/comments_locked_cta" %>
        <% end %>
      <% elsif @stories.any? || @user.comments_count.positive? || @pinned_stories.any? %>
        <%= render "users/main_feed" %>
      <% end %>
    </div>
    <div class="loading-articles" id="loading-articles">
      <%= t("core.loading") %>
    </div>
  </main>
</div>
</main>

<%= javascript_include_tag "storiesList",
                           "feedPreviewCards", "hideBookmarkButtons",
                           "profileDropdown", "users/profilePage",
                           "localizeArticleDates", "asyncUserStatusCheck",
                           defer: true %>
